<template>
	<view class="w-full" style="color: #636363;">
		<view class="w-full border-b text-white p-2 box-border" style="border-color: #303030;">
			{{$t('bibi.zuixinchengjiao')}}
		</view>
		<view>
			<view class="w-full">
				<view class="flex justify-between items-center w-full text-white text-xs box-border" style="padding: 12px 15px;">
					<view style="width: 40%;min-width: 140px;">{{$t('bibi.jiage')}}(ETH)</view>
					<view style="width: 20%;" class="text-right">{{$t('bibi.shuliang')}}(ETH)</view>
					<view class="text-right" style="width: 40%;">{{$t('bibi.shijian')}}(ETH)</view>
				</view>
				<view class="flex justify-between items-center w-full text-white box-border text-xs cursor-pointer relative"
				v-for="(item,index) in table.list" :key="index" @click="tableClick(item)" style="padding: 14px 15px;">
					<view class="flex items-center gap-1 font-bold" style="width: 40%;min-width: 140px;color: #ff231f;">
						{{item.jyd}}
					</view>
					<view class="text-white text-right" style="width: 20%;">{{item.zxj}}</view>
					<view class="text-right text-white" style="width: 40%;">{{item.zdf}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { CaretBottom } from '@element-plus/icons-vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				search: {
					active:'USDT',
					keyword: ''
				},
				table:{
					list:[
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'02:17:16 AM',id:'1',},
						{jyd:'1054112',icon:'',zxj:'101245',zdf:'02:17:16 AM',id:'2'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'02:17:16 AM',id:'3'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'02:17:16 AM',id:'4'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'02:17:16 AM',id:'5'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'02:17:16 AM',id:'6'},
						{jyd:'ETC/USDT',icon:'',zxj:'101245',zdf:'02:17:16 AM',id:'6'},
					]
				}
			}
		},
		components:{
			CaretBottom
		},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		methods: {
			// 点击表格按钮
			clickBtn(name) {
				this.search.active = name
			},
			// 点击表格
			tableClick(row){
				this.table.activeId = row.id
			}

		}
	}
</script>

<style scoped lang="scss">
</style>